<template>
  <div id="personal-bank">
    <div class="bank-box">
      <NavBar title="收款方式管理" left-arrow @click-left="onClickLeft" />
      <div class="bankcard">
        <div class="international" @click="clickinternational">
          <div class="cardicon">
            <Icon class="icon" name="card" size="20" />
          </div>
          <div class="addbank">添加银行卡(国际)</div>
          <div><Icon size="15" class="addicon" color="#0a9ce0" name="add-o" /></div>
        </div>
        <div class="internal" @click="clickinternal">
          <div class="cardicon">
            <Icon class="icon" name="card" size="20" />
          </div>
          <div class="addbank">添加银行卡</div>
          <div><Icon size="16" class="addicon" color="#0a9ce0" name="add-o" /></div>
        </div>
        <div class="deletebankcard">若要修改或删除银行卡信息，请联系客服</div>
      </div>
    </div>
  </div>
</template>
<script>
import { NavBar, Icon } from "vant";
export default {
  components: {
    NavBar,
    Icon,
  },

  data() {
    return {};
  },

  // 创建时
  created() {},

  // 方法
  methods: {
    // 跳出
    onClickLeft() {
      console.log("跳出");
      this.$router.go(-1);
    },

    // 点击添加银行卡（国际）
    clickinternational() {
      this.$router.push({
        path: "./bankinternational",
      })
    },

    // 点击添加银行卡
    clickinternal() {
      this.$router.push({
        path: "./bankinternal",
      }) 
    },

    // 网络请求
  },
};
</script>
<style lang="less" scoped>
#personal-bank {
  width: 100vw;
  height: 100vh;
  background-color: #f7f6fb;
  .bank-box {
    .bankcard {
      .international {
        width: 345px;
        height: 45px;
        border-bottom: 1px black solid;
        margin: 20px auto;
        font-size: 12px;
        line-height: 45px;
        display: flex;
        .cardicon {
          background: #455168;
          width: 25px;
          height: 25px;
          border-radius: 50px;
          position: relative;
          top: 8px;
        }
        .addbank {
          margin-left: 15px;
        }
        .icon {
          position: relative;
          left: 3px;
          top: -3px;
        }
        .addicon {
          position: absolute;
          top: 80px;
          right: 20px;
        }
      }
      .internal {
        width: 345px;
        height: 45px;
        border-bottom: 1px black solid;
        margin: 20px auto;
        font-size: 12px;
        line-height: 45px;
        display: flex;
        .cardicon {
          background: #455168;
          width: 25px;
          height: 25px;
          border-radius: 50px;
          position: relative;
          top: 8px;
        }
        .addbank {
          margin-left: 15px;
        }
        .icon {
          position: relative;
          left: 3px;
          top: -3px;
        }
        .addicon {
          position: absolute;
          top: 150px;
          right: 20px;
        }
      }
      .deletebankcard {
        width: 355px;
        height: 60px;
        background-color: #fff;
        font-size: 14px;
        color: #303133;
        line-height: 60px;
        padding-left: 20px;
      }
    }
  }
}
</style>